<template>
	<view>
		<view>
			<!-- 轮播图 -->
			<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
						:dots-styles="dotsStyles" field="content">
				<swiper class="swiper-box" @change="changeImage" :current="swiperDotIndex" :autoplay="true" :duration="1000" :interval="5000">
					<swiper-item v-for="(item, index) in info" :key="index">
						<view class="swiper-item" :class="'swiper-item' + index">
							<navigator open-type="navigate" :url="'/pages/webview/webview?url=' + encodeURIComponent('https://www.btks.cn')">
								<image style="width: 750rpx" :src="item.url"></image>
							</navigator>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view>
			<!-- 动态导航 -->
			<view v-for="(office,pos) in officeList[0].childrenList" :index="pos" :key="pos">
				<UniSection :title="office.title" type="line" padding>
					<uni-grid :column="4" :highlight="true" :showBorder="false">
						<uni-grid-item v-for="(item, index) in office.childrenList" :index="index" :key="index">
							<view class="grid-item-box" style="background-color: #fff;" @click="changeOffice(item)">
								<uni-icons :type="item.image" :size="30" color="#000" />
								<text style="font-size: 30rpx;">{{item.title}}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</UniSection>
			</view>
		</view>
	</view>
</template>

<script>
	import UniSection from '../../components/uni-section/uni-section'
	export default {
		components:{
			UniSection
		},
		data() {
			return {
				officeList:
				[
					{
						title:"首页",
						childrenList:[
							{
								title:'综合办公',
								childrenList:[
									{
										path:'/subpages/office/office',
										title:'待办任务',
										image:'wallet'
									},{
										path:'/subpages/task/task',
										title:'已办任务',
										image:'settings-filled'
									},{
										path:'/subpages/initiate/initiate',
										title:'发起流程',
										image:'paperplane'
									},{
										path:'/subpages/relate/relate',
										title:'我的流程',
										image:'person-filled'
									},{
										path:'/subpages/assignment/assignment',
										title:'待签收任务',
										image:'mail-open-filled'
									}
								]
							},
							{
								title:'新闻展示',
								childrenList:[]
							}
						]
					},
					{
						title:"个人中心",
						childrenList:[
							{
								title:'个人中心',
								childrenList:[
									{
										path:'/subpages/edit/edit',
										title:'编辑信息',
										image:'wallet'
									},{
										path:'/subpages/password/password',
										title:'修改密码',
										image:'settings-filled'
									},{
										path:'/subpages/userface/userface',
										title:'历史头像',
										image:'contact-filled'
									},{
										path:'/subpages/signature/signature',
										title:'电子签名',
										image:'image'
									}
								]
							},
							{
								title:'辅助功能',
								childrenList:[
									{
										path:'/subpages/system/system',
										title:'系统设置',
										image:'gear'
									},{
										path:'/subpages/location/location',
										title:'共享位置',
										image:'location-filled'
									},{
										path:'/subpages/customer/customer',
										title:'联系客服',
										image:'chatbubble'
									}
								]
							}
						]
					}
				],
				info: [{
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
					imgName: '内容 A'
				},
				{
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
					imgName: '内容 B'
				},
				{
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
					imgName: '内容 C'
				}],
				current: 0,
				mode: 'indexes',
				dotsStyles: {
					backgroundColor: 'rgba(83, 200, 249,0.3)',
					border: '1px rgba(83, 200, 249,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
					selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
				},
				swiperDotIndex: 0
			}
		},
		onShow() {
			
		},
		onLoad() {
			uni.setStorageSync("officeList",this.officeList);
		},
		onPullDownRefresh() {
			
		},
		methods: {
			/* 轮播图当前下标 */
			changeImage(image) {
				this.current = image.detail.current;
			},
			/* 导航跳转 */
			changeOffice(item){
				uni.navigateTo({
					url:item.path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 轮播图布局高度 */
	.swiper-box {
		height: 400upx;
	}
	/* 轮播项样式 */
	.swiper-item {
		/* 注释判断终端样式单独设置 */
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 400upx;
	}
	/* 动态导航样式 */
	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10rpx 0;
	}

</style>
